<script setup lang="ts" name="GoodsSku">
import { GoodsInfo, specsItem, specValue } from '@/types';
import powerSet from '@/utils/bwPowerSet'


const changeSelected = (item: specsItem, sub: specValue) => {
  const pathMap = getPathMap()
  if(sub.disabled) return
  // 排他思想，干掉所有人，然后再点，点那个 那个就高亮
  item.values.filter(v => v.name !== sub.name).forEach( i => i.selected = false)
  sub.selected = !sub.selected
  updataDisabledStatus()
  //  判断规格是否全不选中
  const selected = getSelectedSpec().filter( i => i)
  // console.log(selected)
  if( selected.length === props.goods.specs.length) {
    //  如果走到这里 ，说明已经是全等了
    const key = selected.join('△')
    const [skuId] = pathMap[key]
    // 子传父，给父组件
    emit('changeSku',skuId)
  }
  
  
  
}
const updataDisabledStatus = () => {

  const pathMap = getPathMap()
  props.goods.specs.forEach( (item,index) => {
    
    item.values.forEach( sub => {
      // if( sub.name in pathMap) {
      //   sub.disabled = false
      // }else {
      //   sub.disabled = true
      // }

      const selectedArr = getSelectedSpec()
        // console.log(selectedArr)
      selectedArr[index] = sub.name
      const key = selectedArr.filter(item => item).join('△')
      
      // sub.disabled = !(sub.name in pathMap)
      sub.disabled = !(key in pathMap)
      
    })
  })
}
const getSelectedSpec = () => {
  
  const arr: string[] = []
  props.goods.specs.forEach(item => {
    const result = item.values.find(i => i.selected)
    arr.push(result?.name || '')
    
  })
  // console.log(arr)
  return arr 
}
//  接受父组件传值
const props = defineProps<{
  goods: GoodsInfo
  skuId?:string
}>()

const getPathMap = () => {
  
  const pathMap: any = {}
  
  const skus = props.goods.skus.filter( item => item.inventory > 0 )
  // console.log(skus)
  skus.forEach( item => {
    const arr = item.specs.map( sub => sub.valueName )
    // console.log(arr)
    const powerArr = powerSet(arr)
    // console.log(powerArr)
    powerArr.forEach( sub => {
      const key = sub.join('△')
      
      if(key in pathMap) {
        pathMap[key].push(item.id)
        
      }else {
        pathMap[key] = [item.id]
      }
    })
    
    
  })
  return pathMap
  
}

//  设置默认选中的方案
const initSelectedSpec = ()=> {
  const sku = props.goods.skus.find(item => item.id === props.skuId)
  // console.log(sku);
  if(sku) {
    props.goods.specs.forEach((item, index) => {
      const value = sku.specs[index].valueName
      // console.log(value);
      const spec = item.values.find( item => item.name === value)
      // console.log(spec)
      spec!.selected = true
    })
  }
  
}

const emit = defineEmits<{
  (e: 'changeSku', skuId: string) : void
}>()

setTimeout(()=> {
  const pathMap = getPathMap()
  console.log(pathMap)
  initSelectedSpec()
  updataDisabledStatus()
},500)

</script>
<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs" :key="item.id">
      <dt>{{ item.name }}</dt>
      <dd>
        <template  v-for="sub in item.values" :key="sub.name">
          <img
            @click="changeSelected(item, sub)"
            v-if="sub.picture"
            :class="{selected: sub.selected, disabled: sub.disabled }"
            :src="sub.picture"
            :alt="sub.picture"
            :title="sub.name"
          />
          <span 
          v-else 
          :class="{selected: sub.selected, disabled: sub.disabled }"
          @click="changeSelected(item, sub)"
          >{{ sub.name }}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
